import React,{useState,useCallback} from 'react'
import Child from './Child'
/*
    由于父组件中状态发生了变化，导致子组件也会更新
    问题：如果一个父组件中引用100个子组件，由于父组件中某一个状态发生变化
    那么所有的子组件都要更新，这样性能大大降低
    解决这个问题的办法是，将子组件缓存起来，如果渝澳缓存就要依赖与React中有memo函数来完成这样的操作
*/
export default function Parent() {
  const [count,setCount]=useState(0)
  //用来接收子组件信息的函数
  const getChildMsg=(msg)=>{
    console.log('父组件:',msg);
  }
  //使用useCallback包装后的回调函数
  const getChildMsgCallback=useCallback(getChildMsg,[])
  return (
    <div style={{width:'300px',height:'350px',backgroundColor:'skyblue'}}>
        <h1 >Parent</h1>
         <div>{count}</div>
         <div><button onClick={()=>{setCount(count+1)}}>update</button></div>
         <Child callback={getChildMsgCallback}></Child>
    </div>
  )
}
